<template>
  <div id="invoice">
    <!-- 新增发票信息 -->
    <div class="increaseInvoice" v-show="invoiceInfo">
      <!-- 中间修改白色模态框 -->
      <div class="amendBox">
        <!-- 标题 -->
        <div class="amend-title">
          <p>新增发票信息</p>
          <ul class="appreciationOption">
            <li
              v-for="(item, index) in optionList"
              :key="index"
              :class="currentIndex == index ? 'bgColor' : ''"
              style="cursor:pointer"
              @click="switchover(index)"
            >{{ item }}</li>
          </ul>
        </div>
        <!-- 增值税普通发票 -->
        <div class="ordinary" v-show="common">
          <!-- 个人、企业单项选择 -->
          <div class="choice">
            <ul class="inputList">
              <li>
                <span>*发票抬头类型:</span>
                <el-radio-group v-model="radio" style="line-height:50px;" class="psd">
                  <el-radio :label="1">个人</el-radio>
                  <el-radio :label="2">企业</el-radio>
                </el-radio-group>
              </li>
            </ul>
          </div>
          <!-- 编辑个人发票输入框 -->
          <div class="generalInvoice" v-show="radio == 1">
            <ul class="inputList">
              <li>
                <span>*发票抬头:</span>
                <el-input v-model="personageName" placeholder="请填写准确的抬头名称" class="psd"></el-input>
              </li>
            </ul>
          </div>
          <!-- 编辑企业发票输入框 -->
          <div class="enterpriseInput" v-show="radio == 2">
            <ul class="inputList">
              <li>
                <span>*发票抬头:</span>
                <el-input v-model="enterpriseName" placeholder="请填写准确的抬头名称" class="psd"></el-input>
              </li>
              <li>
                <span>*纳税人识别号:</span>
                <el-input
                  v-model="enterpriseNum"
                  placeholder="请输入纳税人识别号"
                  class="psd"
                  oninput="value=value.replace(/[^\d]/g,'')"
                  maxlength="18"
                ></el-input>
              </li>
            </ul>
          </div>
        </div>
        <!-- 增值税专用发票 -->
        <div class="exclusive" v-show="special">
          <!-- 专用发票信息输入框 -->
          <div class="dedicatedInput">
            <ul class="inputList">
              <li>
                <span>*发票抬头:</span>
                <el-input v-model="invoiceName" placeholder="请填写准确的抬头名称" class="psd"></el-input>
              </li>
              <li>
                <span>*纳税人识别号:</span>
                <el-input
                  v-model="invoiceNum"
                  placeholder="请输入纳税人识别号"
                  class="psd"
                  oninput="value=value.replace(/[^\d]/g,'')"
                  maxlength="18"
                ></el-input>
              </li>
              <li>
                <span>*注册地址:</span>
                <el-input v-model="invoiceSite" placeholder="请输入单位注册地址" class="psd"></el-input>
              </li>
              <li>
                <span>*注册电话:</span>
                <el-input
                  v-model="invoicePhone"
                  placeholder="请输入单位注册电话"
                  class="psd"
                  oninput="value=value.replace(/[^\d]/g,'')"
                  maxlength="11"
                ></el-input>
              </li>
              <li>
                <span>*开户银行:</span>
                <el-input v-model="invoiceBank" placeholder="请输入开户银行" class="psd"></el-input>
              </li>
              <li>
                <span>*银行账户:</span>
                <el-input
                  v-model="invoiceAccount"
                  placeholder="请输入银行账户"
                  class="psd"
                  oninput="value=value.replace(/[^\d]/g,'')"
                  maxlength="19"
                ></el-input>
              </li>
            </ul>
          </div>
        </div>
        <!-- 本人是否同意、是否设置为默认发票 -->
        <div class="consent" style="padding-top:20px">
          <div class="parcel">
            <span class="setIcon">
              <img :src="cancel" alt="图片" />
            </span>
            本人已阅读并同意
            <span style="color:#FE2C4A">《 增票开具确认书 》</span>
          </div>
          <div class="parcel" style="width:24%;color:#FE2C4A">
            <span class="setIcon">
              <img src="../assets/image/3_1_0_select_s.png" alt="图片" />
            </span>
            设置为默认发票
          </div>
        </div>
        <!-- 确定取消按键 -->
        <div class="confirmBtn">
          <span
            style="border-right:1px solid #ccc;display:flex;justify-content:center"
            @click="invoiceHide"
          >取消</span>
          <span style="color:#f03a58;display:flex;justify-content:center" @click="successShow6">确定</span>
        </div>
      </div>
    </div>
    <!-- 新增发票信息编辑成功模态框 -->
    <div class="successfullyInvoice" v-show="successfullyInvoice">
      <!-- 修改成功小图标 -->
      <div class="successIcon">
        <img src="../assets/image/1_1_2_icon_success.png" alt />
      </div>
      <span>新增发票信息成功！</span>
    </div>
    <!-- 编辑普通发票 -->
  </div>
</template>
<script>
import Vue from "vue";
export default Vue.extend({
  data() {
    return {
      invoiceInfo: true, //新增发票信息编辑框
      radio: 1, //个人、企业默认选项
      personageName: "", //普通个人发票抬头
      cancel: require("../assets/image/7_1_1_duihao1.png"), //未选中时的小图标
      notarize: require("../assets/image/3_1_0_select_s.png"), //选中时的小图标
      enterpriseName: "", //普通企业发票抬头
      enterpriseNum: "", //普通企业纳税人识别号
      successfullyInvoice: false, //新增发票信息成功模态框
      optionList: ["增值税普通发票", "增值税专用发票"], //增值税普通发票与增值税企业发票选项
      currentIndex: 0, //当前选中的增值税类型
      common: true, //增值税普通发票显示
      special: false, //   增值税专用发票
      invoiceName: "", //专用发票-发票抬头
      invoiceNum: "", //专用发票-纳税人识别号
      invoiceSite: "", //专用发票-注册地址
      invoicePhone: "", //专用发票-注册电话
      invoiceBank: "", //专用发票-开户银行
      invoiceAccount: "" //专用发票-银行账户
    };
  },
  methods: {
    //    点击新增发票信息模态框的确定按钮，显示新增发票信息成功
    successShow6() {
      this.successfullyInvoice = true;
      this.invoiceInfo = false;
      setTimeout(() => {
        this.successfullyInvoice = false;
        this.$router.push({ path: "/order" });
      }, 2000);
    },
    // 点击新增发票信息模态框的取消按钮，返回父级组件页面
    invoiceHide() {
      this.$router.push({ path: "/order" });
    },
    // 切换增值税普通发票和增值税专业发票
    switchover(i) {
      this.currentIndex = i;
      if (i == 1) {
        this.special = true;
        this.common = false;
      } else {
        this.special = false;
        this.common = true;
      }
    }
  },
  created() {}
});
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
  width: 320px;
}
// 有关修改的模态框
@mixin updateInfo {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}
// 显示信息的白色内容盒标题
@mixin infoTitle {
  width: 465px;
  padding: 0 10px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  height: 38px;
  line-height: 38px;
  font-size: 16px;
  background: #fff;
}
// 输入框内容盒
@mixin inputInfo {
  .inputList {
    width: 100%;
    li {
      height: 40px;
      list-style: none;
      display: flex;
      font-size: 12px;
      text-align: start;
      line-height: 40px;
      padding-bottom: 15px;
      margin-left: -38px;
      span {
        display: block;
        width: 100px;
      }
      .psd {
        flex: 4;
      }
    }
  }
}
//确定、取消按键内容盒
@mixin confirmBtn {
  width: 465px;
  height: 45px;
  padding: 0 10px;
  border-top: 1px solid #ccc;
  display: flex;
  background: #fff;
  span {
    flex: 1;
    line-height: 45px;
    cursor: pointer;
  }
}
// 新增发票信息
.increaseInvoice {
  @include updateInfo();
  .amendBox {
    width: 465px;
    height: 460px;
    padding: 10px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    // 标题
    .amend-title {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      @include infoTitle();
      // 增值税选项
      .appreciationOption {
        width: 50%;
        list-style: none;
        display: flex;
        justify-content: space-around;
        font-size: 13px;
        .bgColor {
          border-bottom: 1px solid #fe2c4a;
          color: #fe2c4a;
        }
      }
    }
    // 增值税普通发票
    .ordinary {
      // 个人、企业单项选择

      .choice {
        @include inputInfo();
        width: 445px;
        padding: 10px;
        display: flex;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        background: #fff;
      }
      //   编辑普通发票个人输入框
      .generalInvoice {
        @include inputInfo();
        width: 445px;
        padding: 10px;
        display: flex;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        background: #fff;
      }
      //   编辑普通发票企业输入框
      .enterpriseInput {
        @include inputInfo();
        width: 445px;
        padding: 10px;
        display: flex;
        height: 85px;
        line-height: 35px;
        font-size: 14px;
        background: #fff;
      }
    }
    // 增值税专用发票
    .exclusive {
      @include inputInfo();
      .dedicatedInput {
        background: #fff;
        padding: 15px 10px 0 10px;
        margin-bottom: -40px;
      }
    }
    // 本人是否同意、是否设置为默认发票
    .consent {
      width: 445px;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      background: #fff;
      // margin-top: -40px;
      .parcel {
        width: 55%;
        display: flex;
        .setIcon {
          cursor: pointer;
          display: inline-block;
          width: 12px;
          height: 12px;
          margin: 1px 5px 0 0;
        }
      }
    }
    // 确定、取消按键
    .confirmBtn {
      box-sizing: border-box;
      @include confirmBtn();
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
}
// 新增发票信息编辑成功框
.successfullyInvoice {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 180px;
  height: 100px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 10px;
  color: #fff;
  letter-spacing: 1px;
  // 修改成功小图标
  .successIcon {
    width: 30px;
    height: 30px;
    margin: 15px auto;
  }
}
</style>
